<template>
    <div class="file-name-editor">
        <div 
        v-if="!editFlag"
        class="text" 
        @click="editStart"
        >
            {{model}}
        </div>

        <div class="edit">
            <div class="input-row">
                <el-input 
                    v-if="editFlag"
                    ref="input"
                    v-model="newFileName"
                    size="mini"
                    @input="validateName()"
                    @blur="submitHandler"
                ></el-input>
            </div>

            <div class="error" v-if="errorMsg">
                {{errorMsg}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        value: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            newFileName: '',
            editFlag: false,
            errorMsg: '',
        };
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    methods: {
        editStart() {
            this.newFileName = this.getFilename(this.value);
            this.editFlag = true;

            this.$nextTick(() => {
                this.$refs.input.focus();
            });
        },
        getFilename(name) {
            if (/\./.test(name)) {
                return name.substring(0, name.lastIndexOf('.'));
            }

            return name;
        },
        editEnd() {
            this.editFlag = false;
            this.errorMsg = '';
        },
        validateName(cb) {
            this.nameCheck(err => {
                if (err) {
                    this.errorMsg = err;

                    cb && cb(false);

                    return;
                }

                this.errorMsg = '';

                cb && cb(true);
            });
        },
        nameCheck(callback) {
            var value = this.newFileName;

            if (!value) {
                callback('请输入文件名');

                return;
            }

            if (value.length > 30) {
                callback('文件名称不能超过30个字');

                return;
            }

            if (/^ /.test(value)) {
                callback('文件名不能以空格开头');

                return;
            }

            if (!/^[^/\\\\:\\*\\?\\<\\>\\|\"]{1,255}$/.test(value)) {
                callback('文件名不能包含下列任何字符：\\/:*?"<>|');

                return;
            }

            this.$get(`${this.$store.state.api.sysUrl}/file/bidding/plan/checkname.json`, {
                name: value,
            }, data => {
                if (data) {
                    callback();
                } else {
                    callback('该文件名称已存在于云盘');
                }
            });
        },
        submitHandler() {
            if (this.newFileName === this.getFilename(this.value)) {
                this.editEnd();
                return;
            }

            this.validateName(valid => {
                if (valid) {
                    this.$get(`${this.$store.state.api.sysUrl}/file/bidding/plan/rename.json`, {
                        name: this.newFileName,
                        rowguid: this.data.rowguid,
                    }, data => {
                        this.model = this.newFileName;
                        this.editEnd();
                    });
                }
            })
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .file-name-editor{
        .text{
            font-weight: bold;
            word-break: break-all;
        }

        .edit{
            .error{
                color: $dangerColor;
            }
        }
    }
</style>